<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">楼宇名称：</span>
      <el-input v-model="name" clearable placeholder="请输入楼宇名称" class="search-main" />
      <el-button type="primary" class="search-btn" @click="query">查询</el-button>
    </div>

    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" @click="openDialog('add')">添加楼宇</el-button>
    </div>

    <!-- 表格区域 -->
    <div class="table xuanxiang">
      <el-table style="width: 100%" :data="buildingData">
        <el-table-column type="index" label="序号" />
        <el-table-column label="楼宇名称" prop="name" />
        <el-table-column label="层数" prop="floors" />
        <el-table-column label="在管面积(m²)" prop="area" />
        <el-table-column label="物业费(元/m²)" prop="propertyFeePrice" />
        <el-table-column label="状态" prop="cardStatus" :formatter="formatStatus" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scoped">
            <el-button size="mini" type="text" @click="openDialog('edit', scoped.row)">编辑</el-button>
            <el-button size="mini" :disabled="scoped.row.status === 1" type="text" @click="del(scoped.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="block">
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        @current-change="pageChange"
        @size-change="handleSizeChange"
      />
    </div>

    <!-- 添加/编辑楼宇对话框 -->
    <el-dialog
      :title="title"
      width="580px"
      :visible.sync="dialogVisible"
      @close="handleClose"
    >
      <!-- 表单区域 -->
      <div class="form-container">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <!-- 楼宇名称 -->
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="addForm.name" placeholder="请输入楼宇名称" />
          </el-form-item>
          <!-- 楼宇层数 -->
          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="addForm.floors" placeholder="请输入楼宇层数" />
          </el-form-item>
          <!-- 在管面积 -->
          <el-form-item label="在管面积" prop="area">
            <el-input v-model="addForm.area" placeholder="请输入在管面积">
              <template slot="append">m²</template>
            </el-input>
          </el-form-item>
          <!-- 物业费 -->
          <el-form-item label="物业费" prop="propertyFeePrice">
            <el-input v-model="addForm.propertyFeePrice" placeholder="请输入物业费">
              <template slot="append">元/m²</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 对话框操作按钮 -->
      <div class="btn">
        <el-button size="mini" @click="resetForm('addForm')">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBuildingListAPI, addBuildingAPI, delBuildingAPI, createOrUpdateBuildingAPI } from '@/api/building'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      page: 1, // 当前页码
      pageSize: 10, // 每页显示的条数
      buildingData: [], // 存储楼宇数据的数组
      name: '', // 搜索框中的楼宇名称
      total: 0, // 数据总数
      title: '添加楼宇', // 对话框标题
      dialogVisible: false, // 控制对话框的显示与隐藏
      addForm: { // 表单数据对象
        name: '', // 楼宇名称
        floors: '', // 楼宇层数
        area: '', // 在管面积
        propertyFeePrice: '' // 物业费
      },
      addFormRules: { // 表单校验规则
        name: [{ required: true, message: '请输入楼宇名称', trigger: 'blur' }], // 楼宇名称必填
        floors: [{ required: true, message: '请输入楼宇层数', trigger: 'blur' }], // 楼宇层数必填
        area: [{ required: true, message: '请输入在管面积', trigger: 'blur' }], // 在管面积必填
        propertyFeePrice: [{ required: true, message: '请输入物业费', trigger: 'blur' }] // 物业费必填
      }
    }
  },
  created() {
    // 组件创建时获取楼宇列表
    this.getBuildingListAPI()
  },
  methods: {
    // 获取楼宇列表
    async getBuildingListAPI() {
      const res = await getBuildingListAPI({ page: this.page, pageSize: this.pageSize, name: this.name })
      this.buildingData = res.data.rows // 更新楼宇数据
      this.total = res.data.total // 更新数据总数
    },

    // 格式化状态显示
    formatStatus(row) {
      const MAP = { 0: '空置中', 1: '租赁中' } // 状态映射
      return MAP[row.status] // 返回对应的状态文本
    },

    // 分页页码变化
    pageChange(page) {
      this.page = page // 更新当前页码
      this.getBuildingListAPI() // 重新获取楼宇列表
    },

    // 每页条数变化
    handleSizeChange(newSize) {
      this.pageSize = newSize // 更新每页条数
      this.getBuildingListAPI() // 重新获取楼宇列表
    },

    // 查询楼宇
    query() {
      this.getBuildingListAPI() // 根据搜索条件重新获取楼宇列表
    },

    // 提交表单（添加或编辑）
    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          // 确保 id 在编辑时被正确包含，并且删除 status 属性
          const buildingData = { ...this.addForm }
          delete buildingData.status // 删除 status 属性

          let response
          if (buildingData.id !== undefined && buildingData.id !== null) {
            // 编辑操作
            response = await createOrUpdateBuildingAPI(buildingData)
            console.log('编辑响应:', response) // 可选：用于调试
            this.showSuccessMessage('编辑楼宇成功')
          } else {
            // 新增操作
            response = await addBuildingAPI(buildingData)
            this.showSuccessMessage('新增楼宇成功')
          }
          this.dialogVisible = false // 关闭对话框
          this.getBuildingListAPI() // 刷新列表
        } else {
          console.log('表单验证失败!')
        }
      })
    },

    // 打开对话框（添加或编辑）
    openDialog(type, row) {
      this.dialogVisible = true // 打开对话框
      if (type === 'edit') {
        this.title = '编辑楼宇' // 设置对话框标题为编辑
        this.addForm = { ...row } // 填充表单数据
      } else {
        this.title = '添加楼宇' // 设置对话框标题为添加
        this.resetForm('addForm') // 重置表单
      }
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields() // 重置表单字段
      this.addForm = { name: '', floors: '', area: '', propertyFeePrice: '' } // 清空表单数据
    },

    // 关闭对话框时重置表单
    handleClose() {
      this.resetForm('addForm') // 重置表单
    },

    // 删除楼宇
    async del(id) {
      await delBuildingAPI(id) // 调用删除接口
      this.showSuccessMessage('删除楼宇成功') // 显示成功消息
      this.getBuildingListAPI() // 刷新列表
    },

    // 显示成功消息
    showSuccessMessage(message) {
      Message({ message, type: 'success', duration: 3000 }) // 显示 Element UI 的成功消息
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  justify-content: end;
}
.card-container {
  padding: 20px;
  background-color: #fff;
}
.card-container .search-label {
  font-size: 14px;
}
.el-input__inner {
  height: 32px;
}
.search-container {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(237, 237, 237, 0.9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn {
    margin-left: 20px;
  }
}
.create-container {
  margin: 10px 0px;
}
.page-container {
  padding: 4px 0px;
  text-align: right;
}
.form-container {
  padding: 0px 80px;
}
.xuanxiang {
  display: flex;
  justify-content: space-evenly;
}
.block {
  display: flex;
  justify-content: end;
}
</style>
